<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i>库存管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider content-position="left"></el-divider>
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="key" @change="range()" placeholder="请输入内容">
            <el-button
                slot="append"
                @click="getList()"
                icon="el-icon-search">
            </el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="info" plain @click="exportCategory">导出</el-button>
        </el-col>
        <el-upload action="http://localhost:9902/category/importCategory"
                   :on-success="handleImport" style="display: inline-block;">
          <el-button type="primary" plain >导入</el-button>
        </el-upload>
      </el-row>
    </div>
    <el-divider content-position="left"></el-divider>
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align-="center" ></el-table-column>
      <el-table-column prop="productId" label="商品ID" width="200" align="center"></el-table-column>
      <el-table-column prop="productName" label="商品名称" align="center" header-align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="productQuantity" label="商品数量" width="200" align="center" header-align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="status" label="商品状态" width="200" align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button type="primary" plain class="op_button" @click="gotoDetails(scope.row.productId)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
          @current-change="changePage"
          hide-on-single-page
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total,prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "WareHousing",
  data(){
    return{
      ids:[],
      key:"",
      currentPage: 1,
      pageSize: 0,
      total: 0,
      tableData:[],
      options:"",
    }
  },
  methods:{
    handleImport(response,file,fileList){
      console.log("========================")
      console.log(response,file,fileList)
      console.log("=======================")
      if (response.code == '200'){
          this.$message.success("操作成功")
          this.loadCategoryList();
      }else {
        this.$message.error(response.message)
      }

    },
    handleSelectionChange(rows){
      this.ids = rows.map(v => v.productId)
    },
    range(){
      console.log(this.key)
      if (this.key==null){
        this.loadCategoryList();
      }
    },
    exportCategory(){
      console.log(this.key);
      console.log(this.ids);
      if (!this.ids.length){
        window.open('http://localhost:9902/category/exportCategory?key='+this.key)
        // window.open('http://localhost:9902/inventory/export?token=' + this.user.token)
      }else {
        console.log(this.ids)
        let idStr = this.ids.join(',');
        console.log(idStr)
        window.open('http://localhost:9902/category/exportCategory?ids='+idStr)
      }
    },
    getList(){
      let page = this.$router.currentRoute.query.page;
      if (!page){
        page=1
      }
      axios.get('http://localhost:9902/category/selectCategoryByName?key='+this.key+'&page='+page)
          .then(response => {
            let jsonResult =response.data;
            if (jsonResult.state == 20000){
              this.currentPage = jsonResult.data.pageNum;
              this.pageSize = jsonResult.data.pageSize;
              this.total = jsonResult.data.total;
              this.tableData = jsonResult.data.list;
            }else {
              this.$alert(jsonResult.message,'错误',{
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    },
    changePage(page) {
      this.$router.replace('?page=' + page);
      this.loadCategoryList();
    },
    // handleSelect(tableData){
    //   axios.get('http://localhost:9902/category/selectCategoryById/?productId=1')
    //       .then(response => {
    //         console.log(response.data.data);
    //       })
    //       .catch(error => {
    //       });
    // },
    gotoDetails(category){
      this.$router.push({path: '/view/inventory/details', query: { category: JSON.stringify(category) }})

    },
    loadCategoryList(){
      let page = this.$router.currentRoute.query.page;
      if (!page){
        page=1
      }
      let url = 'http://localhost:9902/category/selectAll?page='+page;
      axios.get(url)
          .then(response => {
            let jsonResult =response.data;
            if (jsonResult.state == 20000){
              this.currentPage = jsonResult.data.pageNum;
              this.pageSize = jsonResult.data.pageSize;
              this.total = jsonResult.data.total;
              this.tableData = jsonResult.data.list;
            }else {
              this.$alert(jsonResult.message,'错误',{
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    },
  },
  created() {

  },
  mounted() {
    this.loadCategoryList();
  }

}
</script>

<style scoped>

</style>